<template>
    <div>
        <NuxtLayout name="default">
            <div
                v-if="packageState?.status == 0"
                class="w-full h-full bg-white rounded-[6px] flex items-center justify-center"
            >
                <div class="text-xl">开通会员功能未开启!</div>
            </div>
            <ElScrollbar
                v-else-if="packageState?.status == 1"
                class="bg-white rounded-[6px]"
            >
                <div class="p-[16px]">
                    <div class="text-[18px]">
                        <span class="font-medium">开通会员</span>
                        <span class="text-[14px] text-[#888] ml-6">
                            会员服务为虚拟产品，支付成功后不支持退款
                        </span>
                    </div>
                    <div
                        class="bg-[#FCF5E8] flex items-center pl-[10px] mt-[25px] mb-[25px]"
                    >
                        <img
                            src="@/assets/images/notice.png"
                            alt="公告"
                            class="w-[20px] h-[20px] mr-[10px]"
                        />
                        <el-carousel
                            height="40px"
                            direction="vertical"
                            :autoplay="true"
                            class="w-full"
                        >
                            <el-carousel-item
                                v-for="item in buyPackageLists"
                                :key="item"
                            >
                                <div class="w-full flex items-center">
                                    <ElAvatar :src="item.avatar" :size="28" />
                                    <span class="ml-[10px] leading-[40px]">
                                        {{ item.nickname }}
                                        开通了
                                        {{ item.member_package }}
                                    </span>
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <ElScrollbar>
                        <div class="py-[10px] flex">
                            <div
                                v-for="(item, index) in packageState?.lists"
                                :key="index"
                                class="cursor-pointer box-boder flex-none rounded-[14px] mr-[20px]"
                                :class="{
                                    member__active: packageId == item.id
                                }"
                                @click="onChangePackage(item, index)"
                            >
                                <div
                                    class="bg-[red] inline-block text-white px-[5px] py-[2px] text-[12px] rounded-tl-lg rounded-br-lg"
                                >
                                    <span v-if="!item.is_perpetual">
                                        有效期{{ item.duration }}个月
                                    </span>
                                    <span v-else>永久</span>
                                </div>
                                <div
                                    class="flex flex-col items-center rounded-lg mb-[30px] mt-[20px] mx-[20px]"
                                >
                                    <div class="text-black flex items-center">
                                        <Price
                                            :content="item.sell_price"
                                            color="#101010"
                                            mainSize="30px"
                                            minorSize="30px"
                                            fontWeight="600"
                                        >
                                            <template #prefix>
                                                <span class="text-[18px]"
                                                    >¥</span
                                                >
                                            </template>
                                        </Price>
                                        <span class="mx-[2px] text-[18px]">
                                            /
                                        </span>
                                        <div
                                            class="text-[18px] truncate max-w-[92px]"
                                        >
                                            {{ item.name }}
                                        </div>
                                    </div>
                                    <div
                                        v-if="item.lineation_price != '0.00'"
                                        class="text-sm text-[#999]"
                                    >
                                        原价￥{{ item.lineation_price }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ElScrollbar>
                    <div class="member_benefit py-[10px]">
                        <div class="py-[10px] flex items-center">
                            <div class="text-black">会员权益:</div>
                            <template
                                v-for="benefit in packageValue.member_benefits"
                                :key="benefit.id"
                            >
                                <div
                                    class="ml-[15px] flex justify-between items-center"
                                    v-show="benefit.is_checked"
                                >
                                    <span
                                        v-if="benefit.is_checked"
                                        class="text-[#23B571] mt-[5px] mr-[10px]"
                                    >
                                        <Icon name="el-icon-Select"></Icon>
                                    </span>
                                    <span
                                        v-else
                                        class="text-error mt-[5px] mr-[10px]"
                                    >
                                        <Icon name="el-icon-CloseBold"></Icon>
                                    </span>
                                    <span> {{ benefit.name }} </span>
                                </div>
                            </template>
                        </div>
                        <div
                            class="py-[10px] flex items-center"
                            v-if="
                                packageValue.give_chat_number > 0 ||
                                packageValue.give_draw_number > 0
                            "
                        >
                            <div class="text-black">额外赠送：</div>
                            <div class="text-sm flex">
                                <div
                                    v-if="packageValue.give_chat_number > 0"
                                    class="bg-[#FDF7E9] text-[#E4A71C] px-[5px] py-[1px] rounded-sm mr-[10px]"
                                >
                                    对话条数{{
                                        packageValue.give_chat_number
                                    }}条
                                </div>
                                <div
                                    v-if="packageValue.give_draw_number > 0"
                                    class="bg-[#FDF7E9] text-[#E4A71C] px-[5px] py-[1px] rounded-sm mr-[10px]"
                                >
                                    绘画条数{{
                                        packageValue.give_draw_number
                                    }}条
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-[20px] text-white">
                        <ElButton type="primary" @click="handleBuyPackage">
                            <template #default>
                                <span class="text-white">立即开通</span>
                            </template>
                        </ElButton>
                    </div>
                </div>
            </ElScrollbar>
            <Payment ref="PaymentRef" type="member" redirect="/openvip">
                <template v-slot:top="{ name }">
                    <ElFormItem label="套餐名称">
                        <div>{{ name }}</div>
                    </ElFormItem>
                </template>
            </Payment>
        </NuxtLayout>
    </div>
</template>
<script setup lang="ts">
import { getmemberlists } from '@/api/my'
import { getMemberBuyLog } from '@/api/my'
import { memberBuy } from '@/api/pay'

// 套餐索引
const packageIndex = ref<number>(0)
// 当前套餐ID
const packageId = ref<number>(0)
// 套餐状态列表
const packageState = reactive<any>({
    statsu: -1,
    lists: []
})
// 已购买套餐的人列表
const buyPackageLists = ref<any[]>([])

// 订单数据
const orderData = ref()

const packageValue = computed(() => {
    return packageState.lists.find((item: any) => item.id == packageId.value)
})

// 获取会员套餐列表
const getMemberPackageList = async () => {
    try {
        const { status, lists } = await getmemberlists()
        packageState.status = status
        packageState.lists = lists
        const defaultvalue = lists.find((item: any) => item.is_default == 1)
        const defaultvalueIndex = lists.findIndex(
            (item: any) => item.is_default == 1
        )
        if (defaultvalue == null) {
            onChangePackage(lists[0], 0)
            packageState.lists[0].is_default = 1
        } else {
            onChangePackage(defaultvalue, defaultvalueIndex)
        }
    } catch (error) {
        console.log('获取会员套餐列表错误=>', error)
    }
}

// 获取购买套餐的人列表
const getBuyMemberPackageList = async () => {
    try {
        const data = await getMemberBuyLog()
        buyPackageLists.value = data
    } catch (error) {
        console.log('获取会员套餐人数列表错误=>', error)
    }
}

// 选择会员
const onChangePackage = async (value: any, index: number) => {
    packageId.value = value.id
    packageIndex.value = index
}
const PaymentRef = ref(null)
// 购买
const handleBuyPackage = async () => {
    orderData.value = await memberBuy({
        member_package_id: packageId.value
    })
    PaymentRef.value?.open({ ...orderData.value, ...packageValue.value })
}

onMounted(() => {
    getMemberPackageList()
    getBuyMemberPackageList()
})

definePageMeta({
    auth: true,
    layout: false
})
</script>
<style lang="scss" scoped>
.box-boder {
    border: 1px solid rgba(229, 229, 234, 1);
}
.box-buy {
    background: linear-gradient(86.5deg, #fceee0 0%, #ffc9a0 100%);
    color: rgba(107, 61, 30, 1);
}

.member_benefit {
    border-bottom: 1px solid rgba(229, 229, 234, 1);
}

.member__active {
    border: 1px solid var(--el-color-primary);
    background-color: rgb(237, 248, 243);
}

.pay_way_actived {
    border: 1px solid var(--el-color-primary) !important;
}
.pay_way_unactive {
    border: 1px solid #e5e5e5;
}

.retry {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.2);
}
</style>
